<template>
  <div class="tubiao">
    <ul>
        <li v-for="v in arr" :key="v.id">
            <img :src="v.img">
            <p>{{v.title}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
            {id:3111,"title":"住房公积金","img":require("@/assets/index/dai/dai-0.jpg")},
            {id:3112,"title":"支用","img":require("@/assets/index/dai/dai-1.jpg")},
            {id:3113,"title":"我的贷款","img":require("@/assets/index/dai/dai-2.jpg")},
            {id:3114,"title":"贷款试算","img":require("@/assets/index/dai/dai-3.jpg")},
            {id:3115,"title":"智富盈","img":require("@/assets/index/dai/dai-4.jpg")},
            {id:3116,"title":"房贷信息授权","img":require("@/assets/index/dai/dai-5.jpg")},
            {id:3117,"title":"信息利率","img":require("@/assets/index/dai/dai-6.jpg")},
            {id:3118,"title":"提前还本申请","img":require("@/assets/index/dai/dai-7.jpg")},
            ]
        }
    }

}
</script>

<style lang="scss" scoped>
    .tubiao {
        width: 90%;
        height: 160px;
        margin: .3rem auto;
        // background: #eee;
        ul {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        li {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            p {
                font-size: .14rem;
                margin-top: .1rem;

            }
        }
    }

</style>